<template>
    <div class="banner" @click="logLanguage">
        <component :is="getBanner" :nowPage="nowPage"></component>
    </div>
    <div class="slideshow">
        <slideshow />
    </div>
    <div class="functionIntro">
        <div class="threeFun">
            <h1>一站式课程管理</h1>
            <div class="introDetail">
                一站式实践课程管理
                本站支持提供专门面向高校实践课程的课程管理系统，支持
多层管理，垂直式管理，能让各位老师更好的管理好实践项目，
管理好班级学生，
同时，各位同学也能够在本站方便快捷地
完成实践课程内容。
            </div>
        </div>
        <div class="threeFun">
            <h1>丰富多样的授课选择</h1>
            <div class="introDetail">
            <p>在这里，你可以上传你准备好的课程指导视频~</p>
<p>在这里，你可以和你的指导老师/学生团队便捷沟通和交流~</p>
<p>在这里，有十分丰富的授课方式任君选择~</p>
            </div>
        </div>
        <div class="threeFun">
            <h1>更加便捷的教学设计</h1>
            <div class="introDetail">
                <p>是不是还在对传统的实践课堂感到无趣呢？</p>
<p>是不是还是在为使用社交平台作为小组任务沟通的工具而困扰呢？</p>
<p>在这里，Up Learning解决你的一切困扰~</p>
            </div>
        </div>
    </div>
    <div class="feedback">
        <div class="twoSide" ></div>
        <div class="threeFeb">
            <img :src="p1" alt="">
        </div>
        <div class="threeFeb">
            <img :src="p2" alt="">
        </div>
        <div class="threeFeb">
            <img :src="p3" alt="">
        </div>
        <div class="twoSide"></div>
    </div>
    <div class="register" v-show="isRegistered">
        <!-- <p style="font-weight: 600; font-size: 1.4em; line-height: 2.4em">Join over 2 million designers already using
            InVision. Get InVision free forever!</p>
        <p style="line-height: 1.8em;">Your team is most productive when your entire design workflow is in one place
            from start to finish. Our integrations automatically push and pull activity from your favorite systems</p>
        <p style="line-height: 1.8em;">straight into InVision.</p> -->
        <button type="danger" @click="goto('/register')">点击注册</button>
    </div>
    <div class="imfor">
        <p >服务条款  |  隐私政策 |  儿童隐私政策  |  版权投诉 |  投资者关系 |  广告合作  |  联系我们 </p>
        <p class="imforIntro">
            Copyright  2022 Quanta Center. All rights reserved.
        </p>
        <img src="../../assets/images/index/home/logo.svg" alt="">
    </div>
</template>
<script setup>
import slideshow from '/src/components/Slideshow.vue';
import banner from '../../components/Banner.vue'
import teacherBanner from '../../components/TeacherBanner.vue'
import { getUserData } from '../../utils';
import { onMounted, reactive, ref } from 'vue'
import { useRouter, onBeforeRouteLeave } from 'vue-router'
import axios from 'axios';
import p2 from '../../assets/images/teacher/myCourse/project6.jpg'
import p1 from '../../assets/images/index/home/project2.png'
import p3 from '../../assets/images/index/home/project3.png'

// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if(getUserData() != undefined){
    userData = getUserData();
}

const isRegistered = ref(true)

//得到当前登录状态
const getBanner = ref(banner);
function getState(){
    if(userData.Token != '')
    {
        getBanner.value = teacherBanner;
        isRegistered.value = false
    }
    else{
        isRegistered.value = true
        getBanner.value = banner;
    }
}
getState();

//获得首页信息
axios({
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Token': userData.Token,
        },
        method: 'get',
        url: 'http://api.linwine.space/api/sjk/main/detail',
        responseType: 'json',
    }).then((data) => {
        console.log(data);
    }).catch((data) => {
        console.log('error');
    })

//给banner子组件传值
const nowPage = ref(3);

const router = useRouter();
//跳转页面
const goto = function (pageName) {
    router.push(pageName)
}

//给banner注册引用信息
const bannerLan = ref();
//对body做修改
onMounted(() => {
    //获得当前语言
    // console.log(bannerLan.value.language);
    document.querySelector('body').setAttribute('style', 'min-width: 1000px');
})
onBeforeRouteLeave(() => {
    document.querySelector('body').removeAttribute('style')
})

</script>

<style scoped>
.banner {
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 10000;
}

.slideshow {
    display: flex;
    position: relative;
    height: 340px;
    width: 100%;
    top: 60px;
}

.functionIntro {
    display: flex;
    justify-content: space-between;
    height: 288px;
    background-color: rgb(255, 255, 255);
    margin-top: 4%;
}

.threeFun {
    background-color: white;
    height: 100%;
    width: 100%;
    box-sizing: content-box;
    padding-left: 4.5%;
    padding-top: 3.5%;
    padding-right: 1.1%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.threeFun h1{
    font-family: Source Han Sans CN;
	font-size: 1.7em;
	font-weight: bolder;
	font-stretch: normal;
	line-height: 37px;
	letter-spacing: 0px;
	color: #707070;
}
.introDetail {
    padding-top: 4.7%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    font-family: Source Han Sans CN;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #707070;
}

.feedback {
    height: 340px;
    background: url(/src/assets/images/index/home/articleBackground.jpg) no-repeat;
    background-size: 100% 340px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.threeFeb {
    width: 16.2%;
    background-color: aliceblue;
    height: 82%;
}
.threeFeb img{
    width: 100%;
    height: 100%;
}
.twoSide{
    width:10%;
  height: 100%;
  background-color: #8493a6;
  align-items: center;
}
.register {
    width: 100%;
    height: 114px;
    box-sizing: content-box;
    padding-top: 1.3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.register button {
    margin-top: 2%;
    width: 300px;
	height: 50px;
	background-color: #8493a6;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
	border-radius: 6px;
    cursor: pointer;
    border: 0px;
    outline: none;
    font-family: Source Han Sans CN;
	font-size: 1.3em;
	font-weight: normal;
	font-stretch: normal;
	line-height: 37px;
	letter-spacing: 0px;
	color: #ffffff;
}
.register button:hover{
    background-color: #707070;
    transition: 0.2s;
}
.imfor {
    width: 100%;
    height: 200px;
    font-size: 1em;
    background-color: #ebedef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-top: 49px;
    padding-bottom: 35px;
}
.imfor p{
    font-family: Source Han Sans CN;
	font-size: 1em;
	font-weight: normal;
	font-stretch: normal;
	line-height: 27px;
	letter-spacing: 0px;
	color: #707070;
}
.imforIntro{
    font-family: Source Han Sans CN;
	font-size: 0.8em;
	font-weight: normal;
	font-stretch: normal;
	line-height: 27px;
	letter-spacing: 0px;
	color: #707070;
}
</style>
  
  
  
  